<template>
  <div class="app-container">
    <el-select v-model="strategy" placeholder="策略" value-key="id">
      <el-option
        v-for="item in strategyList"
        :key="item.id"
        :label="item.name"
        :value="item"
      />
    </el-select>
    <el-select v-model="exchange" placeholder="账户" value-key="id">
      <el-option
        v-for="item in exchangeList"
        :key="item.id"
        :label="item.name"
        :value="item"
      />
    </el-select>
    <el-select v-model="pair" placeholder="交易对">

      <el-option v-for="item in appGlobal.PairList" :key="item" :label="item" :value="item" />

    </el-select>
    <el-button @click="getRobotList()">
      查询
    </el-button>
    <el-button @click="dialogTableVisible=true">
      参数批量调整
    </el-button>
    <el-button v-if="false">
      批量停止
    </el-button>
    <el-button v-if="false">
      批量启动
    </el-button>
    <div />
    <!-- <el-table
      v-if="true"
      :data="robotList"
      style="width: 100%"
    >
      <el-table-column
        v-for="item in argInfos"
        :key="item.Name"
        :prop="item.Name"
        :label="item.Remark"
        width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.strategyArgsObj[item.Name] }}
        </template>
      </el-table-column>
    </el-table> -->
    <table>
      <tr>
        <td class="tborder">机器人</td>
        <td>状态</td>
        <td v-for="item in strategy.argInfosObj" :key="item.Name" class="tborder">
          <el-tooltip class="item" effect="dark" :content="item.Remark" placement="top-start">
            <span> {{ item.Name }}</span>
          </el-tooltip>
        </td>
      </tr>
      <tr v-for="rInfo in robotList" :key="rInfo.id">
        <td class="tborder">{{ rInfo.id }}-{{ rInfo.name }}</td>
        <td>{{ rInfo.status }}</td>
        <td v-for="item in strategy.argInfosObj" :key="item.Name" class="tborder">
          <span v-if="item.Name=='NowPeriod'">{{ getPeriodName(rInfo.strategyArgsObj[item.Name]) }}</span>
          <span v-else>{{ rInfo.strategyArgsObj[item.Name] }}</span>

        </td>

      </tr>
    </table>
    <el-dialog width="80%" title="批量编辑" :visible.sync="dialogTableVisible">
      <table class="tborder">
        <tr class="tborder">
          <td class="tborder">机器人</td>
          <td>状态</td>
          <td v-for="item in strategy.argInfosObj" :key="item.Name" class="tborder">
            <el-tooltip class="item" effect="dark" :content="item.Remark" placement="top-start">
              <span> {{ item.Name }}</span>
            </el-tooltip>
          </td>
        </tr>
        <tr v-for="rInfo in robotList" :key="rInfo.id">
          <td class="tborder">{{ rInfo.id }}-{{ rInfo.name }}</td>
          <td>{{ rInfo.status }}</td>
          <td v-for="item in strategy.argInfosObj" :key="item.Name" class="tborder">
            <span v-if="item.Name=='NowPeriod'">
              <el-select v-model="rInfo.strategyArgsObj[item.Name]" placeholder="周期">
                <el-option
                  v-for="pItem in periodList"
                  :key="pItem.period"
                  :label="pItem.name"
                  :value="pItem.period+''"
                />
              </el-select>
            </span>
            <span v-else>
              <el-input v-model="rInfo.strategyArgsObj[item.Name]" :placeholder="item.Name" />
            </span>

          </td>

        </tr>
      </table>
      <el-button @click="updateAllArgs()">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import sapi from '@/api/sysApi'
import exchangeApi from '@/api/exchange'
import robotApi from '@/api/robot'
export default {
  data() {
    return {
      loading: false,
      dialogTableVisible: false,
      robotList: [],
      strategy: {},
      argInfos: [],
      strategyId: '',
      exchangeId: '',
      exchange: {},
      pair: '',
      strategyList: [],
      exchangeList: [],
      periodList: [
        { loading: false, name: '1m', period: 60, sign: 'OneMinute,' },
        { loading: false, name: '3m', period: 3 * 60, sign: 'ThreeMinutes,' },
        { loading: false, name: '5m', period: 5 * 60, sign: 'FiveMinutes,' },
        { loading: false, name: '15m', period: 15 * 60, sign: 'FifteenMinutes,' },
        { loading: false, name: '30m', period: 30 * 60, sign: 'ThirtyMinutes,' },
        { loading: false, name: '1h', period: 3600, sign: 'OneHour,' },
        { loading: false, name: '2h', period: 2 * 3600, sign: 'TwoHours,' },
        { loading: false, name: '4h', period: 4 * 3600, sign: 'FourHours,' },
        { loading: false, name: '6h', period: 6 * 3600, sign: 'SixHours,' },
        { loading: false, name: '8h', period: 8 * 3600, sign: 'EightHours,' },
        { loading: false, name: '12h', period: 12 * 3600, sign: 'TwelveHours,' },
        { loading: false, name: '1d', period: 24 * 3600, sign: 'OneDay,' },
        { loading: false, name: '3d', period: 3 * 24 * 3600, sign: 'ThreeDays,' },
        { loading: false, name: '1w', period: 7 * 24 * 3600, sign: 'OneWeek,' },
        { loading: false, name: '1M', period: 30 * 24 * 3600, sign: 'OneMonth' }
      ]
    }
  },
  created() {
    sapi.getStrategyList().then(p => {
      p.data.forEach(p => {
        p.argInfosObj = p.argInfosStr ? JSON.parse(p.argInfosStr) : {}
      })
      this.strategyList = p.data
    })
    exchangeApi.getList().then(p => {
      this.exchangeList = p.data
    })
    this.pair = 'BTCUSDT'
  },
  mounted() {

  },
  methods: {
    updateAllArgs() {
      const newObj = {}
      this.robotList.map(p => {
        newObj[p.id + ''] = p.strategyArgsObj
        console.log(this.robotList)
        const errSet = this.robotList.some(x => p.id !== x.id && p.strategyArgsObj.NowPeriod === x.strategyArgsObj.NowPeriod)
        if (errSet) {
          alert('周期不能重复！' + p.strategyArgsObj.NowPeriod)
          return
        }
        return newObj
      })
      robotApi.editStrategyListArgs(newObj).then(p => {
        this.$message(`保存完毕:` + p.data)
      })
    },
    getPeriodName(period) {
      const re = this.periodList.filter(p => (p.period + '') === period)[0]
      if (re) { return re.name }
    },
    getArgInfos() {
      if (this.strategy && this.strategy.argInfosStr) {
        this.argInfos = JSON.parse(this.strategy.argInfosStr)
        return this.argInfos
      }
    },
    getStrategyArgs(robotInfo) {
      if (robotInfo.strategyArgs) {
        return JSON.parse(robotInfo.strategyArgs)
      }
    },
    getRobotList() {
      this.loading = true
      robotApi.query({ strategyId: this.strategy.id, exchangeId: this.exchange.id, pair: this.pair }).then(p => {
        p.data.forEach(p => {
          p.strategyArgsObj = p.strategyArgs ? JSON.parse(p.strategyArgs) : {}
        })
        this.robotList = p.data
      }).finally(() => { this.loading = false })
    },
    rest(item) {
      sapi.RestartRobot(item.id).then((p) => {
        if (p) item.status = 1
      })
    },
    stop(item) {
      sapi.StopRobot(item.id).then((p) => {
        if (p) item.status = 0
      })
    },
    submitForm() {
      sapi.editRobotStrategyArgs(this.robotId, this.argInfos).then(resp => {
        this.$alert('设置成功')
      })
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
.tborder{
    border: 1px solid #cbcbcb;
    margin: 0px;
    padding: 0px;
    border-collapse: collapse;
}

</style>

